<script setup lang="ts">
import { Document, Upload } from '@element-plus/icons-vue'
import { PAGING } from '@/constant'
import { formatTime } from '@/utils'
// ------------------use------------------
// #region
const { vLoading, withLoading } = useDefineLoading()
const [tableData, setTableData] = useState<any[]>([])
const [isDetailDialog, setIsDetailDialog]
  = useState<boolean>(false)
const [isEscalationDialog, setIsEscalationDialog]
  = useState<boolean>(false)
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  await withLoading(sleep)(1000)
  setTableData(Array.from({ length: 24 }).fill(0))
}
function showDetailDialog() {
  setIsDetailDialog(true)
}
function showEscalationDialog() {
  setIsEscalationDialog(true)
}
function reset() {
  getTableData()
}
function search() {
  getTableData()
}
// #endregion
</script>

<template>
  <div
    class="flex-direction padding-sm overflow box-border flex align-end container"
  >
    <el-form
      inline
      label-width="100px"
      label-position="left"
      class="flex-incompressible width-fill"
    >
      <el-form-item label="查询时间段">
        <el-date-picker
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button plain @click="reset">
          重置
        </el-button>
        <el-button type="primary" @click="search">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <p
      class="margin-0 margin-bottom-xs width-fill container-tip flex-incompressible"
    >
      共 47天， 上报国家中心：完全上报 0天， 部分上报 0天，
      未上报 47天， 上报省中心：完全上报 46天， 部分上报
      0天， 未上报 1天；
    </p>
    <el-table
      v-loading
      :data="tableData"
      class="flex-fillRemaining width-fill"
    >
      <el-table-column
        fixed
        type="index"
        label="序号"
        width="80"
      />
      <el-table-column label="日期" width="240">
        <el-button type="primary" link>
          {{ formatTime(Date.now(), 'YYYY-MM-DD') }}
        </el-button>
      </el-table-column>
      <el-table-column label="应报数">
        {{ 24 || '---' }}
      </el-table-column>
      <el-table-column label="已采数">
        {{ 24 || '---' }}
      </el-table-column>
      <el-table-column label="最后采集时间">
        {{
          formatTime(Date.now(), 'YYYY-MM-DD hh:mm:ss')
            || '---'
        }}
      </el-table-column>
      <el-table-column label="已报数">
        <el-table-column label="上报国家中心">
          {{ 0 ?? '---' }}
        </el-table-column>
        <el-table-column label="上报省中心">
          {{ 24 || '---' }}
        </el-table-column>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <el-tooltip content="明细" placement="top">
          <el-button
            type="primary"
            :icon="Document"
            @click="showDetailDialog"
          />
        </el-tooltip>
        <el-tooltip content="上报" placement="top">
          <el-button
            type="primary"
            :icon="Upload"
            @click="showEscalationDialog"
          />
        </el-tooltip>
      </el-table-column>
    </el-table>

    <el-pagination
      hide-on-single-page
      :page-sizes="PAGING.PAGE_SIZES"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100"
      background
      class="flex-incompressible margin-top-xs"
    />

    <!-- 明细 -->
    <el-dialog
      v-model="isDetailDialog"
      title="明细"
      width="1200"
      append-to-body
      class=""
    >
      <el-tabs model-value="whole-plant">
        <el-tab-pane label="全厂" name="whole-plant">
          <el-table
            :data="tableData"
            height="60vh"
            class="flex-fillRemaining width-fill"
          >
            <el-table-column
              fixed
              type="index"
              label="序号"
              width="80"
            />
            <el-table-column label="用途分类">
              <el-button type="primary" link>
                购进已消费
              </el-button>
            </el-table-column>
            <el-table-column label="能源名称">
              {{
                '全厂-一次能源-其它原煤-购进已消费' || '---'
              }}
            </el-table-column>
            <el-table-column label="计量单位">
              {{ '吨' || '---' }}
            </el-table-column>
            <el-table-column label="指标值">
              {{ '30.13' || '---' }}
            </el-table-column>
            <el-table-column label="折标系数">
              0.7143
            </el-table-column>
            <el-table-column label="折标单位">
              {{ '吨标准煤/吨' || '---' }}
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="工序单元 " name="process-unit">
          <el-table
            :data="tableData"
            height="60vh"
            class="flex-fillRemaining width-fill"
          >
            <el-table-column
              fixed
              type="index"
              label="序号"
              width="80"
            />
            <el-table-column label="工序及工序单元">
              <el-button type="primary" link>
                锅炉房
              </el-button>
            </el-table-column>
            <el-table-column label="用途分类">
              {{ '购进已消费' || '---' }}
            </el-table-column>
            <el-table-column label="能源名称">
              {{
                '锅炉房-一次能源-其它原煤-购进已消费'
                  || '---'
              }}
            </el-table-column>
            <el-table-column label="计量单位">
              {{ '吨' || '---' }}
            </el-table-column>
            <el-table-column label="指标值">
              30.13
            </el-table-column>
            <el-table-column label="折标系数">
              {{ '0.7143' || '---' }}
            </el-table-column>
            <el-table-column label="折标单位">
              {{ '吨标准煤/吨' || '---' }}
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="setIsDetailDialog(false)">
            取消
          </el-button>
          <el-button
            type="primary"
            @click="setIsDetailDialog(false)"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 上报 -->
    <el-dialog
      v-model="isEscalationDialog"
      title="手动上报确认"
      append-to-body
      width="600"
      class=""
    >
      <div style="margin: -20px 0">
        <h4 class="margin-0 fs-16">
          说明
        </h4>
        <p class="margin-tb-xs">
          更新上传只会上传最近更新的数据
        </p>
        <p class="margin-0">
          全部上传会对该周期数据重新上传，可能会造成平台统计连续上传中断，请慎重！
        </p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="setIsEscalationDialog(false)">
            取消
          </el-button>
          <el-button
            type="danger"
            @click="setIsEscalationDialog(false)"
          >
            全部上传
          </el-button>
          <el-button
            type="primary"
            @click="setIsEscalationDialog(false)"
          >
            更新上传
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.el-tabs {
  margin: -20px 0;
}
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
